<template>
  <div class="sa-notice" @click="showNotice">
    <!-- <el-popover
      placement="top"
      :width="360"
      trigger="click"
      popper-class="notice-popper"
      @show="showNotice"
    >
      <template #reference> -->
    <el-badge is-dot :hidden="!noticeUnreadNum">
      <slot>
        <el-button class="tools-btn">
          <sa-svg class="tool-icon" name="sa-Notification"></sa-svg>
        </el-button>
      </slot>
    </el-badge>
    <!-- </template>

      <div class="notice-wrap" v-loading="noticeLoading">
        <div class="notice-header">
          <el-menu
            v-if="noticeTypeList.length"
            class="el-menu-demo sa-flex sa-row-around sa-col-center"
            mode="horizontal"
            :default-active="noticeTypeList[0].value"
            @select="onNoticeMenu"
          >
            <template v-for="(item, index) in noticeTypeList" :key="index">
              <el-menu-item :index="item.value">
                <div class="sa-flex sa-col-center sa-row-center">
                  <span>{{ item.label }}</span>
                  <span class="sa-m-l-4" v-if="item.unread_num"
                    >({{ item.unread_num }})</span
                  >
                </div>
              </el-menu-item>
            </template>
          </el-menu>
        </div>
        
      </div>
    </el-popover> -->

    <el-drawer
      v-model="isShowNotice"
      direction="rtl"
      custom-class="chat-drawer"
      modal-class="chat-drawer-overlay"
      :show-close="false"
    >
      <template #header>
        <ul v-if="noticeTypeList.length" class="chat-status-wrap sa-flex sa-col-center">
          <li class="bg" :style="bgStyle"></li>
          <!-- {{noticeTypeList}} -->
          <li
            v-for="item in noticeTypeList"
            :key="item"
            class="chat-status"
            :class="{ 'is-active': item.value == noticeTypeList[0].value }"
            @click="onNoticeMenu(item.value)"
          >
            <el-badge is-dot :hidden="!item.unread_num">
              {{ item.label }}
            </el-badge>
          </li>
          <!-- <li
              class="chat-status"
              :class="{ 'is-active': sessionType == 'ing' }"
              @click="changeSessionType('ing')"
            >
              会话中
            </li>
            <el-badge is-dot :hidden="!hasWaiting">
              <li
                class="chat-status"
                :class="{ 'is-active': sessionType == 'waiting' }"
                @click="changeSessionType('waiting')"
              >
                排队中
              </li>
            </el-badge>
            <li
              class="chat-status"
              :class="{ 'is-active': sessionType == 'history' }"
              @click="changeSessionType('history')"
            >
              历史记录
            </li> -->
        </ul>
        <el-icon class="close" @click="isShowNotice = false">
          <CircleCloseFilled />
        </el-icon>
        <!-- <el-menu
          v-if="noticeTypeList.length"
          class="el-menu-demo sa-flex sa-row-around sa-col-center"
          mode="horizontal"
          :default-active="noticeTypeList[0].value"
          @select="onNoticeMenu"
        >
          <template v-for="(item, index) in noticeTypeList" :key="index">
            <el-menu-item :index="item.value">
              <div class="sa-flex sa-col-center sa-row-center">
                <span>{{ item.label }}</span>
                <span class="sa-m-l-4" v-if="item.unread_num"
                  >({{ item.unread_num }})</span
                >
              </div>
            </el-menu-item>
          </template>
        </el-menu> -->
      </template>
      <div class="chat-content sa-flex sa-flex-1">
        <el-scrollbar id="noticeScroll" class="notice-scroll" height="100%">
          <div
            class="notice-list sa-flex sa-row-around"
            :class="isEmpty(item.read_time) ? '' : 'notice-list-read'"
            v-for="(item, index) in noticeList"
            :key="item.id"
            @click="readNotice(item, index)"
          >
            <div class="notice-list-content">
              <div class="wrapper">
                <input :id="`exp-${index}`" class="exp" type="checkbox" />
                <div class="text">
                  <label class="btn" :for="`exp-${index}`"></label>
                  【{{ item.data.message_title }}】{{ item.data.message_text }}
                </div>
              </div>
              <span class="notice-time">{{ item.create_time }}</span>
            </div>
          </div>

          <!-- 置空页 -->
          <el-empty v-show="!noticeList.length">
            <template #image>
              <sa-svg className="empty-svg" name="sa-neirongweikong" size="150"></sa-svg>
            </template>
            <template #description>
              <div class="empty-description"> 您的工作效率很高哦， 现在还没有新的待办消息！ </div>
            </template>
          </el-empty>
          <!-- 加载状态 -->
          <button
            class="loadmore-btn sa-reset-button"
            v-show="noticeList.length"
            @click="onLoadMore"
          >
            {{ loadingMap[noticeListparmas.loadStatus].title
            }}<i
              class="loadmore-icon sa-m-l-6"
              :class="loadingMap[noticeListparmas.loadStatus].icon"
            ></i>
          </button>
        </el-scrollbar>
      </div>
      <div class="chat-footer">
        <div class="empty" @click="clearNotice()">清空 已读消息</div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  /**
   * Botice 站内信
   *
   */
  import { onMounted, reactive, ref, defineComponent, computed } from 'vue';

  import chatApi from '@/app/chat/api';
  import sheep from '@/sheep';
  import { isEmpty } from 'lodash';
  export default defineComponent({
    name: 'SaNotice',
    components: {},
    setup(props, context) {
      const chatStore = sheep.$store('socket');
      // loading
      const noticeLoading = ref(false);
      // 查看更多
      const onLoadMore = () => {
        if (noticeListparmas.current_page < noticeListparmas.last_page) {
          noticeListparmas.current_page += 1;
          getNoticeList();
        }
      };
      const isShowNotice = ref(false);

      // 获取站内信列表
      const noticeListparmas = reactive({
        current_page: 0,
        last_page: 0,
        loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
      });
      const getNoticeList = async () => {
        noticeLoading.value = true;
        noticeListparmas.loadStatus = 'loading';
        const { data } = await chatApi.notifications({
          search: JSON.stringify({ notification_type: curNoticeType.value }),
          page: noticeListparmas.current_page,
        });
        noticeListparmas.current_page = data.current_page;
        noticeListparmas.last_page = data.last_page;
        noticeListparmas.loadStatus =
          noticeListparmas.current_page < noticeListparmas.last_page ? 'loadmore' : 'nomore';
        chatStore.notice_list(data.data);
        chatStore.notice_read(curNoticeType.value);
        noticeLoading.value = false;
      };

      // 获取站内信分类
      const curNoticeType = ref('');
      const getNoticeType = async () => {
        const { data } = await chatApi.notificationType();
        const { unread_num, notification_type } = data;
        chatStore.notice_type(data);
        curNoticeType.value = notification_type[0].value;
      };

      // 显示站内信
      const showNotice = () => {
        isShowNotice.value = true;
        noticeListparmas.current_page = 1;
        chatStore.notice_list_clear();
        getNoticeList();
      };

      const noticeTypeList = computed(() => chatStore.noticeTypeList);
      const bgStyle = computed(() => {
        let index = noticeTypeList?.value.findIndex((item) => item.value == curNoticeType.value);
        return {
          left: 2 + index * 118 + 'px',
        };
      });
      // 切换站内信
      const onNoticeMenu = (e) => {
        curNoticeType.value = e;
        noticeListparmas.current_page = 1;
        chatStore.notice_list_clear();
        getNoticeList();
      };

      function desc(item) {
        let str = `【${item.data.message_title}】${item.data.message_text}`;
        if (str.length > 42) {
          item.show = true;
        }
        return item.hidden ? str : str.substr(0, 42) + '...';
      }

      async function readNotice(item, index) {
        const { data } = await chatApi.read(item.id);
        chatStore.notice_replace({ index, data });
      }

      const clearNotice = async () => {
        const { data } = await chatApi.clear();
        noticeListparmas.current_page = 1;
        chatStore.notice_list_clear();
        getNoticeList();
      };

      onMounted(() => {
        getNoticeType();
      });
      return {
        isEmpty,
        noticeTypeList,
        noticeUnreadNum: computed(() => chatStore.noticeUnreadNum),
        noticeList: computed(() => chatStore.noticeList),
        onLoadMore,
        noticeLoading,
        curNoticeType,
        onNoticeMenu,
        noticeListparmas,
        loadingMap: {
          loadmore: {
            title: '查看更多',
            icon: 'el-icon-d-arrow-left',
          },
          nomore: {
            title: '没有更多了',
            icon: '',
          },
          loading: {
            title: '加载中... ',
            icon: 'el-icon-loading',
          },
        },
        showNotice,
        isShowNotice,
        bgStyle,
        desc,
        readNotice,
        clearNotice,
      };
    },
  });
</script>
<style>
  .notice-popper {
    padding: 0 !important;
  }
</style>
<style lang="scss" scoped>
  .sa-notice {
    :deep() {
      .el-badge__content.is-dot {
        height: 6px;
        width: 6px;
      }
    }
  }
  .empty-svg {
    color: var(--sa-subfont);
  }
  .empty-description {
    width: 200px;
    font-size: 16px;
    color: var(--sa-subfont);
  }
  // 按钮
  .tools-btn {
    border: none;
    height: 32px;
    min-height: 32px;
    width: 32px;
    padding: 0;
    border-radius: 50%;
    &:active {
      background-color: var(--t-btn-hover);
      .tool-icon {
        font-size: 20px;
        color: var(--sa-background-assist);
      }
    }
    &:hover {
      background-color: var(--t-btn-hover);
      .tool-icon {
        font-size: 20px;
        color: var(--sa-background-assist);
      }
    }
    &:focus {
      background-color: var(--t-btn-hover);
      .tool-icon {
        font-size: 20px;
        color: var(--sa-background-assist);
      }
    }
    .tool-icon {
      font-size: 20px;
      color: var(--sa-font);
    }
    :deep(.el-badge__content) {
      background-color: #ed5b56 !important;
    }
  }
  // 站内信
  .notice-wrap {
    .notice-header {
      height: 60px;
      border-bottom: 1px solid var(--sa-border);
    }
    .el-menu {
      height: 100%;
    }
    .el-menu--horizontal {
      border-bottom: none;
    }
    .el-menu:not(.el-menu--collapse) .el-menu-item,
    .el-menu:not(.el-menu--collapse) .el-sub-menu__title {
      height: 100%;
      border-radius: 0;
      margin-bottom: 0;
    }

    // .notice-list {
    //   .notice-list-content {
    //     width: 250px;
    //     border-bottom: 1px solid var(--sa-space);
    //     .notice-text {
    //       font-family: PingFang SC;
    //       font-size: 14px;
    //       color: var(--sa-font);
    //       line-height: 20px;
    //     }
    //     .notice-time {
    //       font-family: PingFang SC;
    //       font-size: 12px;
    //       color: var(--sa-subfont);
    //     }
    //   }
    // }
  }
  // 加载更多
  .loadmore-btn {
    width: 100%;
    height: 40px;
    font-size: 12px;
    color: var(--sa-subfont);
    .loadmore-icon {
      transform: rotate(-90deg);
    }
  }

  .notice-scroll {
    width: 100%;
    //   height: 600px;
  }
  @media all and (min-width: 0) and (max-width: 500px) {
    // .notice-scroll {
    //   height: 520px;
    // }
  }

  :deep() {
    .chat-drawer-overlay {
      background-color: transparent;
    }
    .chat-drawer {
      width: 360px !important;
      height: unset;
      border-radius: 8px;
      top: 48px;
      bottom: 30px;
      @media only screen and (max-width: 768px) {
        width: 100% !important;
        border-radius: 0;
        top: 0;
        bottom: 0;
      }
      .el-drawer__header {
        height: 56px;
        padding: 0 12px;
        background: var(--t-btn-hover);
        color: var(--sa-background-assist);
        margin-bottom: 0;
        justify-content: center;
        position: relative;
        .close {
          position: absolute;
          top: 20px;
          right: 12px;
          font-size: 16px;
          &:hover {
            color: var(--t-color-primary);
          }
          @media only screen and (max-width: 768px) {
            top: 18px;
            font-size: 20px;
          }
        }
      }
      .el-drawer__body {
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .chat-content {
          flex: 1;
          height: calc(100% - 40px);

          .notice-list {
            .notice-list-content {
              // width: 250px;
              width: 100%;
              padding: 16px 16px;
              border-bottom: 1px solid var(--sa-space);

              &:hover {
                background: var(--t-bg-hover);

                .text::after {
                  content: '';
                  width: 999vw;
                  height: 999vw;
                  position: absolute;
                  box-shadow: inset calc(100px - 999vw) calc(21px - 999vw) 0 0 var(--t-bg-hover);
                  margin-left: -100px;
                }
              }
              .notice-text {
                font-family: PingFang SC;
                font-size: 14px;
                color: var(--sa-font);
                line-height: 20px;
                position: relative;
                // padding-right: 26px;
                .notice-hidden {
                  // position: absolute;
                  // top: 20px;
                  // right: 0;
                  color: var(--t-color-primary);
                  font-size: 12px;
                }
              }
              .notice-time {
                font-family: PingFang SC;
                font-size: 12px;
                color: var(--sa-subfont);
              }

              .wrapper {
                display: flex;
                width: inherit;
                overflow: hidden;
              }
              .text {
                font-size: 14px;
                color: var(--sa-font);
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: justify;
                position: relative;
                line-height: 1.5;
                max-height: 3em;
                transition: 0.3s max-height;
                white-space: normal;
                word-break: break-all;
              }
              .text::before {
                content: '';
                height: calc(100% - 21px);
                float: right;
              }
              .text::after {
                content: '';
                width: 999vw;
                height: 999vw;
                position: absolute;
                box-shadow: inset calc(100px - 999vw) calc(21px - 999vw) 0 0 #fff;
                margin-left: -100px;
              }
              .btn {
                position: relative;
                float: right;
                clear: both;
                margin-left: 20px;
                font-size: 12px;
                padding: 0 8px;
                // background: #3f51b5;
                line-height: 1.5;
                border-radius: 4px;
                color: var(--t-color-primary);
                cursor: pointer;
                /* margin-top: -30px; */
              }
              .btn::after {
                content: '展开';
              }
              .exp {
                display: none;
              }
              .exp:checked + .text {
                max-height: none;
              }
              .exp:checked + .text::after {
                visibility: hidden;
              }
              .exp:checked + .text .btn::before {
                visibility: hidden;
              }
              .exp:checked + .text .btn::after {
                content: '收起';
              }
              .btn::before {
                content: '...';
                position: absolute;
                left: -5px;
                color: var(--sa-font);
                transform: translateX(-100%);
              }
            }

            &.notice-list-read {
              .text,
              .notice-time {
                color: var(--sa-place);
              }
              .btn::before {
                color: var(--sa-place);
              }
            }
          }
        }
        // 输入框
        .chat-footer {
          border-top: 1px solid var(--sa-space);
          background-color: var(--sa-table-striped);
          height: 40px;
          display: flex;
          align-items: center;
          flex-shrink: 0;
          .empty,
          .more {
            flex: 1;
            text-align: center;
            font-size: 12px;
            font-weight: 400;
            color: var(--sa-font);
          }
          .line {
            width: 1px;
            height: 20px;
            background: var(--sa-border);
          }
        }
      }
    }
  }
  .chat-status-wrap {
    width: fit-content;
    flex: unset;
    height: 36px;
    padding: 0 2px;
    border-radius: 8px;
    background: var(--t-bg-focus);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .bg {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 118px;
      height: 32px;
      background: var(--sa-background-assist);
      border-radius: 6px;
      transition: all 0.2s;
    }
    .chat-status {
      min-width: 118px;
      height: 32px;
      padding: 0 7px;
      color: var(--t-color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }
  }
</style>
